<template>
<div style="display: inline-block; direction: ltr">
    <Input :rtl="rtl" class="input" type="number" :placeholder="lang.phone_number" v-model="data.phoneNumber" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.phoneNumber = ''"></Button>
        <p :slot="start_slot">{{ lang.phone_number }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.email" v-model="data.eMail" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.email = ''"></Button>
        <p :slot="start_slot">{{ lang.email }}</p>
    </Input>

    <Input :rtl="rtl" class="input" type="number" :placeholder="lang.qq_number" v-model="data.qqNumber" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.qqNumber = ''"></Button>
        <p :slot="start_slot">{{ lang.qq_number }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.wechat_number" v-model="data.wechatNumber" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.wechatNumber = ''"></Button>
        <p :slot="start_slot">{{ lang.wechat_number }}</p>
    </Input>

</div>
</template>

<script>
import {Contact} from "../Entities/Contact"

const CHANGE = "change";
const DATA = "data";
const VALID = "valid";

export default {
  model: {
    prop: DATA,
    event: CHANGE
  },
  props: {
      rtl: {
          required: false,
          type: Boolean,
          default: false
      },
    data: {
      required: true,
      type: Object,
      validator: Contact.isValid
    }
  },
  methods: {
    change() {
      this.$emit(VALID, this.valid);
      this.$emit(CHANGE, this.data);
    }
  },
  data() {
    return {};
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    start_slot() {
      return this.lang.rtl ? "append" : "prepend";
    },
    end_slot() {
      return !this.lang.rtl ? "append" : "prepend";
    },
    valid() {
      let valid = true;
      valid &= this.data.phoneNumber.length == 7 || this.data.phoneNumber.length == 11;

      return valid == 1 ? true : false;
    }
  }
};
</script>


<style lang="scss" scoped>
p {
  width: 60px;
}

.input {
  margin: {
    top: 5px;
    bottom: 5px;
  }
}
</style>

